<template>
  <div style="padding: 0 16px">
    <ele-pro-table
      row-key="dict_data_id"
      :columns="dictDataColumns"
      :datasource="dictDataDatasource"
      :show-overflow-tooltip="true"
      :toolbar="false"
      :pagination="false"
      :empty-props="false"
      :selections="selections || []"
      @update:selections="updateSelections"
      @done="handleTableDone"
    >
      <template #action="{ row: d }">
        <el-link type="primary" underline="never" @click="editDictData(d)">
          修改
        </el-link>
        <el-divider direction="vertical" />
        <el-link type="danger" underline="never" @click="removeDictData(d)">
          删除
        </el-link>
      </template>
    </ele-pro-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { EleMessage } from "ele-admin-plus/es";
import { listDictionaryData } from "@/api/system/dictionary-data";

const props = defineProps({
  dict_id: {
    type: Number,
    required: true,
  },
  selections: Array,
});

const emit = defineEmits(["update:selections", "setDictionaryData"]);

/** 字典数据列配置 */
const dictDataColumns = ref([
  {
    type: "selection",
    columnKey: "selection",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    type: "index",
    columnKey: "index",
    width: 50,
    align: "center",
  },
  {
    prop: "dict_data_name",
    label: "字典数据名称",
    sortable: "custom",
    minWidth: 140,
  },
  {
    prop: "dict_data_code",
    label: "字典数据代码",
    sortable: "custom",
    minWidth: 140,
  },
  {
    prop: "sort_number",
    label: "排序号",
    sortable: "custom",
    width: 110,
    align: "center",
  },
  {
    prop: "created_at",
    label: "创建时间",
    sortable: "custom",
    minWidth: 140,
    align: "center",
  },
  {
    columnKey: "action",
    label: "操作",
    width: 120,
    align: "center",
    slot: "action",
  },
]);

/** 字典数据数据源 */
const dictDataDatasource = ({ where, orders }) => {
  return listDictionaryData({ ...where, ...orders, dict_id: props.dict_id });
};

/** 删除字典数据 */
const removeDictData = (row) => {
  EleMessage.error("删除: " + row.dict_data_name);
};

/** 修改字典数据 */
const editDictData = (row) => {
  EleMessage.info({ message: "修改: " + row.dict_data_name, plain: true });
};

/** 更新多选选中数据 */
const updateSelections = (value) => {
  emit("update:selections", value);
};

/** 表格数据请求完成事件 */
const handleTableDone = (result) => {
  emit("setDictionaryData", props.dict_id, result.data);
};
</script>
